<template>
  <div class="hp-network">
    <div class="network_img">
      <van-empty :image="network" :description="errorMsg" />
    </div>
    <div class="network_operation">
      <van-button type="default" @click="reFresh()" :loading="loading" loading-text="刷新中...">刷新试试</van-button>
    </div>
    <div class="network_info">
      <ul>
        <li>
          <i class="title-dot"></i>
          <p class="title">可能原因:</p>
          <p class>当前网络环境不稳定或网络连接已断开</p>
        </li>
        <li>
          <i class="title-dot"></i>
          <p class="title">解决办法:</p>
          <p class>1. 检查是否开启了飞行模式</p>
          <p class v-if="isAndroid">2. 到 设置 > 移动网络 > 移动数据 开启'移动数据'和'启用4G/5G'</p>
          <p class v-if="!isAndroid">2. 到 设置 > 蜂窝移动网络 > 移动数据 开启'移动数据'和'启用4G/5G'</p>
          <p class>3. 确认是否首次启动时未授权访问蜂窝网络,可以进入设置开启网络访问权限</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
const network = require('@/assets/img/empty/netError.png')
export default {
  name: 'networkError',
  data () {
    return {
      loading: false,
      network: network,
      errorMsg: this.$route.params.errMsg || '网络异常',
      // redirect: this.$route.query.redirect || '/',
      isAndroid: this.$os.android,
      // queryParams: this.$route.params
    };
  },
  methods: {
    reFresh () {
      // var that = this;
      // that.loading = true
      // // 判断网络状态
      // that.$app.getNetworkType().then(res => {
      //   // 意外进入超时页面
      //   if (!that.queryParams.redirect) {
      //     that.$app.exitApp();
      //   }
      //   // if (res && res.isOnLine) {
      //   setTimeout(() => {
      //     that.$router.replace({
      //       name: that.queryParams.redirect,
      //       params: Object.assign({}, that.queryParams.oriParams, that.queryParams.oriQuery) // 目标页面params数据
      //     }).then(() => {
      //       that.loading = false
      //     })
      //   }, 2000); // 之所以延迟处理,主要是安卓连续调用两次获取网络API会卡死
      //   // }
      // }).catch(() => {
      //   that.$app.toast('无网络连接,请检查后再试')
      //   that.loading = false
      // })
    }
  },
  mounted () {
  }
};
</script>

<style lang="scss" scoped>
.hp-network {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #ffffff;
  .network_img {
    position: absolute;
    top: 120px;
    left: 50%;
    transform: translateX(-280px);
  }

  .network_operation {
    position: absolute;
    top: 620px;
    left: 50%;
    transform: translateX(-145px);
  }

  .network_info {
    position: absolute;
    top: 740px;
    color: #999999;
    // margin: 80px 10px 0px 10px;
    p.content {
      text-indent: 1em;
    }
    p.title {
      position: relative;
    }
    .title-dot{
      position: relative;
      &::before {
        content: " ";
        width: 7px;
        height: 7px;
        background: #333333;
        position: absolute;
        border-radius: 50%;
        left: -13px;
        top: 6px;
      }
    }
    ul li {
      padding-left: 80px;
      padding-right: 30px;
    }
  }
  ::v-deep .van-empty__description {
    width: 320px;
    text-align: center;
  }
}
</style>
